<template>
    <!-- 先放着 -->
    <orderInfo v-if="!$hideXiWei" class="mg-t-20" @refresh="handleRefresh" @changeTab="handleChangeTab" />
    <div class="container block">
        <div class="seize row">
            <div class="num-time-left"></div>
            <div class="num-time">
                <span class="detail-value">
                    <el-date-picker v-model="rechargeTime" type="daterange" class="date-solt point" unlink-panels
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        style="width:241px;margin-right:0" @change="judgeTime" value-format="YYYY-MM-DD" />
                </span>
                <!-- <button class="btn btn-alone" @click="search">搜索</button> -->
<!--                <button class="btn block-btn-right" @click="onExport()">-->
<!--                    <i class="el-icon el-icon-upload2" />导出-->
<!--                </button>-->
                <export-button @export="onExport()"></export-button>
            </div>
        </div>
        <el-tabs :model-value="isThatkindType" @tab-click="onTabs">
            <el-tab-pane label="发薪" name="pay">
                <div class="table">
                    <el-table :data="payList" style="width: 100%" :header-row-style="{ color: '#202536' }"
                        :row-style="{ color: '#5E617D' }" empty-text="暂无发薪记录">
                        <el-table-column prop="status" label="类型">
                            <template v-slot>
                                <div class="color-green">
                                    成功
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="successTime" label="时间" />
                        <el-table-column prop="amount" label="金额" />
                    </el-table>
                </div>
                <el-pagination class="pagination" v-model:currentPage="payPageNum" v-model:page-size="payPageSize"
                    :page-sizes="[10, 30, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="payTotal"
                    @size-change="paySizeChange" @current-change="getPayList">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="保险" name="insurance">
                <div class="table">
                    <el-table :data="insuranceList" style="width: 100%" :header-row-style="{ color: '#202536' }"
                        :row-style="{ color: '#5E617D' }" empty-text="暂无投保记录">
                        <el-table-column prop="status" label="类型">
                            <template v-slot='scope'>
                                <p class="color-green" v-show="scope.row.status === '1'">
                                    成功
                                </p>
                                <p class="color-blue" v-show="scope.row.status === '0'">
                                    等待
                                </p>
                                <p class="color-red" v-show="scope.row.status === '2'">
                                    驳回
                                </p>
                                <p class="color-green" v-show="scope.row.status === '3'">
                                    提现
                                </p>
                                <p class="color-green" v-show="scope.row.status === '4'">
                                    转出
                                </p>
                                <p class="color-green" v-show="scope.row.status === '5'">
                                    转入
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="successTime" label="时间" />
                        <el-table-column prop="amount" label="金额" />
                    </el-table>
                </div>
                <el-pagination class="pagination" v-model:currentPage="insurancePageNum"
                    v-model:page-size="insurancePageSize" :page-sizes="[10, 30, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper" :total="insuranceTotal" @size-change="insureSizeChange"
                    @current-change="getInsureRechargeRecord">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="电子签" name="sign">
                <div class="table">
                    <el-table :data="elesignList" style="width: 100%" :header-row-style="{ color: '#202536' }"
                        :row-style="{ color: '#5E617D' }" empty-text="暂无记录">
                        <el-table-column prop="status" label="类型" class="type-green">
                            <template v-slot>
                                <p class="color-green">
                                    成功
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="successTime" label="时间" />
                        <el-table-column prop="amount" label="金额" :formatter="(row: { amount: string }) => (row.amount ? row.amount : '暂无')
                            " />
                    </el-table>
                </div>
                <el-pagination class="pagination" v-model:currentPage="elesignPageNum" v-model:page-size="elesignPageSize"
                    :page-sizes="[10, 30, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="elesignTotal"
                    @size-change="elesignSizeChange" @current-change="getElesignRechargeRecord">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="长期保" name="period">
                <div class="table">
                    <el-table :data="longInsuranceList" style="width: 100%" :header-row-style="{ color: '#202536' }"
                        :row-style="{ color: '#5E617D' }" empty-text="暂无记录">
                        <el-table-column prop="status" label="类型">
                            <template v-slot='scope'>
                                <p class="color-green" v-show="scope.row.status === '1'">
                                    成功
                                </p>
                                <p class="color-blue" v-show="scope.row.status === '0'">
                                    等待
                                </p>
                                <p class="color-red" v-show="scope.row.status === '2'">
                                    驳回
                                </p>
                                <p class="color-green" v-show="scope.row.status === '3'">
                                    提现
                                </p>
                                <p class="color-green" v-show="scope.row.status === '4'">
                                    转出
                                </p>
                                <p class="color-green" v-show="scope.row.status === '5'">
                                    转入
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="successTime" label="时间" />
                        <el-table-column prop="amount" label="金额" />
                    </el-table>
                </div>
                <el-pagination class="pagination" v-model:currentPage="longInsurancePageNum"
                    v-model:page-size="longInsurancePageSize" :page-sizes="[10, 30, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper" :total="longInsuranceTotal"
                    @size-change="longInsureSizeChange" @current-change="getLongInsureRechargeRecord">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane v-if="!$hideXiWei" label="团队账户" name="group">
                <div class="table">
                    <rechargeTable :table-data="tableData" :page-info="pageInfo" @doSearch="getGroupAccountList" />
                </div>
            </el-tab-pane>
        </el-tabs>
        <!-- @current-change="projectHandleChange" -->
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { rechargeRecordExport } from '@/api/export'
import { insureRechargeRecord, elesignRechargeRecord, getPayList, ResultRechargeRecordDto } from '@/api/recharge-record'
import store from '@/store/index'
import axios from 'axios'
import { downLoadFile } from '../utils/util'
import rechargeTable from '@/components/seat/rechargeTable.vue';
import orderInfo from '@/components/seat/order-info.vue';
import { getRechargeList } from '@/api/recharge-record'

export default defineComponent({
    name: 'RechargeRecord',
    components: {
        rechargeTable,
        orderInfo
    },
    data() {
        return {
            isThatkindType: 'pay',
            rechargeTime: '',
            payTime: '',
            insuranceTime: '',
            elesignTime: '',
            longInsuranceTime: '',

            insuranceList: [] as ResultRechargeRecordDto[], // 保险列表
            insuranceTotal: 0 as number,
            insurancePageNum: 1,
            insurancePageSize: 10,

            longInsuranceList: [] as ResultRechargeRecordDto[], // 长期保列表
            longInsuranceTotal: 0 as number,
            longInsurancePageNum: 1,
            longInsurancePageSize: 10,

            elesignList: [] as ResultRechargeRecordDto[], // 电子签
            elesignTotal: 0,
            elesignPageNum: 1,
            elesignPageSize: 10,

            payList: [] as ResultRechargeRecordDto[], // 发薪
            payTotal: 0,
            payPageNum: 1,
            payPageSize: 10,
            tableData: [] as any,
            pageInfo: {
                pageNum: 1,
                pageSize: 10,
                total: 0
            },
        }
    },
    computed: {
        isChangeTab() {
            return store.state.changeRechargeTab
        }
    },
    watch: {
        isChangeTab(newval) {
            if (newval) {
                const tab = newval.split('-')[0]
                this.onTabs({
                    props: {
                        name: tab
                    }
                })
            }
        }
    },
    async created() {
        this.getInsureRechargeRecord()
        this.getLongInsureRechargeRecord()
        this.getElesignRechargeRecord()
        this.getPayList()
        if(!this?.$?.appContext?.app?.config?.globalProperties?.$hideXiWei) {
            this.getGroupAccountList()
        }
    },
    beforeRouteEnter(to, from, next) {
        next((vm: any) => {
            if (to.query?.tab) {
                vm.onTabs({
                    props: {
                        name: vm.$route.query?.tab as string
                    }
                })
            }
        })
    },
    methods: {
        // 投保列表
        async getInsureRechargeRecord() {
            const result = await insureRechargeRecord({
                pageNum: this.insurancePageNum,
                pageSize: this.insurancePageSize,
                beginCreateTime: this.rechargeTime ? this.rechargeTime[0] : '',
                endCreateTime: this.rechargeTime ? this.rechargeTime[1] : '',
                exportType: 'insurance'
            })
            this.insuranceList = result.list
            this.insuranceTotal = result.total
        },
        insureSizeChange() {
            this.insurancePageNum = 1
            this.getInsureRechargeRecord()
        },
        // 长期保列表
        async getLongInsureRechargeRecord() {
            const result = await insureRechargeRecord({
                pageNum: this.longInsurancePageNum,
                pageSize: this.longInsurancePageSize,
                beginCreateTime: this.rechargeTime ? this.rechargeTime[0] : '',
                endCreateTime: this.rechargeTime ? this.rechargeTime[1] : '',
                exportType: 'period'
            })
            this.longInsuranceList = result.list
            this.longInsuranceTotal = result.total
        },
        longInsureSizeChange() {
            this.longInsurancePageNum = 1
            this.getLongInsureRechargeRecord()
        },
        // 电子签列表
        async getElesignRechargeRecord() {
            const result = await elesignRechargeRecord({
                pageNum: this.elesignPageNum,
                pageSize: this.elesignPageSize,
                beginCreateTime: this.rechargeTime ? this.rechargeTime[0] : '',
                endCreateTime: this.rechargeTime ? this.rechargeTime[1] : ''
            })
            this.elesignList = result.list
            this.elesignTotal = result.total
        },
        elesignSizeChange() {
            this.elesignPageNum = 1
            this.getElesignRechargeRecord()
        },
        // 发薪记录
        async getPayList() {
            const result = await getPayList({
                pageNum: this.payPageNum,
                pageSize: this.payPageSize,
                beginCreateTime: this.rechargeTime ? this.rechargeTime[0] : '',
                endCreateTime: this.rechargeTime ? this.rechargeTime[1] : ''
            })
            this.payList = result.list
            this.payTotal = result.total
        },
        paySizeChange() {
            this.payPageNum = 1
            this.getPayList()
        },
        async onExport() {
            const result = await rechargeRecordExport({
                exportType: this.isThatkindType + '',
                beginCreateTime: this.rechargeTime ? this.rechargeTime[0] : '',
                endCreateTime: this.rechargeTime ? this.rechargeTime[1] : ''
            }, {
                loading: true
            })
            if (!result.fileUrl && result.exportStatus === 0) {
                store.commit('getLongPollingFile', result)
            } else {
                axios({
                    url: result.fileUrl,
                    method: 'GET',
                    responseType: 'blob'
                }).then(async (response) => {
                    await downLoadFile(response, result.exportType, result.updateTime, result.remark)
                    await this.$message.success('导出成功！')
                })
            }
            // window.location.href =
            //     process.env.VUE_APP_BASE_URL +
            //         '/common/download?delete=true&fileName=' + result

            // this.$message.success('导出成功！')
        },
        onTabs(tab: { props: { name: string } }) {
            this.isThatkindType = tab.props.name
            console.log(tab, 'this.isThatkindType')
            this.judgeTime()
        },
        judgeTime() {
            if (this.isThatkindType === 'pay' && this.payTime !== this.rechargeTime) {
                this.paySizeChange()
                this.payTime = this.rechargeTime
            } else if (this.isThatkindType === 'insurance' && this.insuranceTime !== this.rechargeTime) {
                this.insureSizeChange()
                this.insuranceTime = this.rechargeTime
            } else if (this.isThatkindType === 'sign' && this.elesignTime !== this.rechargeTime) {
                this.elesignSizeChange()
                this.elesignTime = this.rechargeTime
            } else if (this.isThatkindType === 'period' && this.longInsuranceTime !== this.rechargeTime) {
                this.getLongInsureRechargeRecord()
                this.longInsuranceTime = this.rechargeTime
            }
        },
        // 判断查询
        search() {
            if (this.isThatkindType === 'pay') {
                this.paySizeChange()
            } else if (this.isThatkindType === 'insurance') {
                this.insureSizeChange()
            } else if (this.isThatkindType === 'sign') {
                this.elesignSizeChange()
            } else {
                this.getLongInsureRechargeRecord()
            }
        },
        // 团队账户列表
        getGroupAccountList() {
            getRechargeList({
                pageNum: this.pageInfo.pageNum,
                pageSize: this.pageInfo.pageSize
            }).then(res => {
                this.tableData = res.list || []
                this.pageInfo.total = res.totalCount
            })
        },
        handleRefresh() {
            this.getGroupAccountList()
        },
        handleChangeTab(ev: string) {
            this.onTabs({
                props: {
                    name: ev
                }
            })
        }
    }
})
</script>

<style lang="stylus" scoped>
table()
.block
    padding: 10px 24px 0;
    position relative
:deep().date-solt
    width 241px
    margin-right 20px
.operation
    .btn,.btn-green
        width 113px
        height 40px
        margin-left 20px

:deep().el-tabs__header.is-top
    display inline-block
:deep().el-tabs__nav-scroll
    padding-right 20px
.seize
    display flex
    justify-content space-between
    align-items flex-start
    position absolute
    right 20px
    top 10px
.num-time-left
    width 300px
    height 40px
    flex-shrink 1
.num-time
    display: flex
    align-items: center
.btn-alone
    margin-right 10px
.color-green
    color color-green
.color-blue
    color color-blue
.color-red
    color color-red
</style>
